<template>
    <div>
        <div style="width: 70%;background-color: white;margin: 30px auto;border-radius: 20px;">
            <div>
                <div
                    style="font-weight: bold; font-size: 18px;color: #000000FF;line-height: 80px;border-bottom: #cccccc 1px solid;">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;全部收藏({{tableData.length}})件</div>
                <div style="margin: 20px 0; margin-left: 60px;margin-right: 60px;">
                    <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                        style="width: 100%">
                        <el-table-column prop="img" label="商品图片" width="180">
                            <template #default="scope">
                                <img style="width:60px;height:48px" :src="scope.row.img" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="goodName" label="商品名称" width="360" />
                        <el-table-column prop="sellerName" label="店铺名称" width="220" />
                        <el-table-column prop="price" label="商品价格" width="270" />
                        <el-table-column label="操作" width="180">
                            <template #default="scope">
                                <el-popconfirm title="您确认要移除嘛?" @confirm="deleteCollect(scope.row.id)"
                                    confirm-button-text="确认" cancel-button-text="取消" icon-color="red"
                                    style="height: 400px">
                                    <template #reference>
                                        <el-button type="danger" plain>移除收藏</el-button>
                                    </template>
                                </el-popconfirm>

                            </template>
                        </el-table-column>
                    </el-table>
                    <div>
                        <el-pagination style="margin: 0px auto;height: 100px;" small background
                            @current-change="currentChange" :current-page="currentPage" :page-size="pageSize"
                            layout="prev, pager, next" :total="tableData.length" class="mt-4" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

import { selectGoods, selectOne, selectByUser, deleteOne } from "../../api/index";

export default {
    data() {
        return {
            tableData: [],
            goodsData: [],
            typeData: {},
            sellerData: {},
            user: JSON.parse(JSON.stringify(this.$store.getters.getUser)),
            currentPage: 1,
            pageSize: 10,
        }
    },
    created() {
        selectByUser("collect", this.user.id).then(res => {
            if (res.code === 200) {
                this.tableData = res.data;
            } else {
                this.$message.error(res.message)
            }
        })
    },
    methods: {
        navGo(url) {
            this.$router.push(url);
        },
        currentChange(val) {
            this.currentPage = val;
        },
        deleteCollect(id) {
            deleteOne("collect", id).then(res => {
                if (res.code === 200) {
                    this.$message.success(res.message);
                    selectByUser("collect", this.user.id).then(res => {
                        if (res.code === 200) {
                            this.tableData = res.data;
                        } else {
                            this.$message.error(res.message)
                        }
                    })
                } else {
                    this.$message.error(res.message);

                }
            })
        }
    }
}

</script>

<style>
body {
    background-color: #efebeb
}

a:hover {
    color: red;
}

a {
    text-decoration: none;
    color: #666666
}
</style>